<template>
  <div>
    <van-tabs sticky color="#FFD500">
      <van-tab title="TOP100">
        <topList :topImg="TtopImg" :ListInfo="TlistInfo"></topList>
      </van-tab>
      <van-tab title="新星榜">
        <topList :topImg="NtopImg" :ListInfo="NListInfo"></topList>
      </van-tab>
      <van-tab title="独立原创榜">
        <topList :topImg="ItopImg" :ListInfo="IListInfo"></topList>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getClasstify } from '../../api/index'
import topList from '../../components/classtify/top'
export default {
  components: {
    topList
  },
  data () {
    return {
      TtopImg: '',
      NtopImg: '',
      ItopImg: '',
      TlistInfo: [],
      NListInfo: [],
      IListInfo: [],
      topList: {},
      newList: {},
      independentList: {}
    }
  },
  mounted () {
    getClasstify().then(response => {
      const data = response.data.data
      console.log('data', data)
      const {
        data: {
          topList,
          newList,
          independentList
        }
      } = response.data
      this.topList = topList
      this.newList = newList
      this.independentList = independentList
      this.TtopImg = this.topList.topImg
      this.NtopImg = this.newList.topImg
      this.ItopImg = this.independentList.topImg
      this.IListInfo = this.independentList.listInfo
      this.NListInfo = this.newList.listInfo
      this.TlistInfo = this.topList.listInfo
    }).catch((error) => {
      console.log(error)
    })
  }
}
</script>

<style lang="scss" scoped>
</style>
